<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>图片标签</title>
  </head>
  <body>
    <!--
      图片标签用于向当前页面引入一个外部图片
        使用img标签来引入外部图片,img标签是一个自结束标签
        img这种元素属于替换元素(基于块和行内元素之间,具有两种元素的特点)
        属性:
          src 指定的事外部图片的路径 (路径规则和超链接是一样的)

          alt 图片的描述,这个描述默认情况下不会显示,有些浏览器会在图片无法加载时显示
              搜索引擎会根据alt中的内容来识别图片,如果不写alt属性图片不会被搜索引擎所收录

          width 图片的宽度 (单位是像素)
          height 图片的高度 (单位是像素)
            - 宽度和高度中如果只修改了一个,则另一个会等比例缩放

          注意:
            一般情况在pc端,不建议修改图片的大小,直接将图片的大小提前切好就行了,需要多大就裁减多大
            但是移动端,经常需要对图片进行缩放(大图缩小)

      图片的格式:
          jpeg(jpg)
            - 支持的颜色比较丰富,不支持透明效果,不支持动图
            - 一般用来显示图片
          gif
            - 支持的颜色比较少,支持简单透明,支持动图
            - 适合颜色单一的图片,动图
          png
            - 支持的颜色比较丰富,支持复杂透明,不支持动图
            - 颜色丰富,复杂透明图片(专为网页而生)
          webp
            - 这种格式是谷歌新推出的专门用来表示网页中的图片的一种格式
            - 它具备其他图片格式的所有优点,而且文件还特别小
            - 缺点: 兼容性不好

          base64
            - 将图片使用base64进行编码,这样可以将图片转换为字符,通过字符的形式来引入图片。
            - 一般都是一些需要和网页一起加载的图片才会使用base64

          效果一样,用小的
          效果不一样,用效果好的
    -->
    <img src="../img/动图/1.gif" alt="魔方"/>

    <!--  引入外部链接的图片  -->
    <img width="500px" height="200px"
         src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202006%2F20%2F20200620172438_jrwjv.thumb.1000_0.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1669773958&t=e542054f68f90d1b37b4f537fc0f5eea"/>

    <img
      src=""/>

  </body>
</html>
